<!--
  智慧社区管理系统 - 支付详情对话框组件
  @author Wu.Liang
  @date 2025-06-26
  @version 3.0 - 根据系统设计调整方案重构，统一支付接口
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="支付详情"
    width="700px"
    :close-on-click-modal="false"
  >
    <div v-if="paymentData" class="payment-detail">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">
            {{ paymentData.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            <span class="amount">¥{{ paymentData.formattedAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="用户">
            {{ paymentData.userName }}
          </el-descriptions-item>
          <el-descriptions-item label="社区">
            {{ paymentData.communityName }}
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <el-tag :type="getPaymentMethodTagType(paymentData.paymentMethod)">
              {{ paymentData.paymentMethodName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="支付状态">
            <el-tag :type="getStatusTagType(paymentData.paymentStatus)" :effect="getStatusEffect(paymentData.paymentStatus)">
              {{ paymentData.paymentStatusName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="业务类型">
            <el-tag :type="getBusinessTypeTagType(paymentData.businessType)">
              {{ paymentData.businessTypeName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="业务订单ID">
            {{ paymentData.businessOrderId }}
          </el-descriptions-item>
          <el-descriptions-item label="支付时间" :span="2">
            <span v-if="paymentData.paymentTime">{{ formatDateTime(paymentData.paymentTime) }}</span>
            <span v-else class="text-muted">未支付</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" :span="2">
            {{ formatDateTime(paymentData.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">
            {{ paymentData.description || '无' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 第三方支付信息 -->
      <el-card v-if="paymentData.thirdPartyOrderNo || paymentData.channelCode" class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>第三方支付信息</span>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item v-if="paymentData.channelCode" label="支付渠道">
            {{ paymentData.channelCode }}
          </el-descriptions-item>
          <el-descriptions-item v-if="paymentData.thirdPartyOrderNo" label="第三方订单号">
            {{ paymentData.thirdPartyOrderNo }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 退款信息 -->
      <el-card v-if="paymentData.refundAmount" class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>退款信息</span>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="退款金额">
            <span class="refund-amount">¥{{ paymentData.formattedRefundAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="退款时间">
            {{ formatDateTime(paymentData.refundTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="退款原因" :span="2">
            {{ paymentData.refundReason }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 操作记录 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>操作记录</span>
          </div>
        </template>
        
        <el-timeline>
          <el-timeline-item
            :timestamp="formatDateTime(paymentData.createTime)"
            placement="top"
          >
            <el-card>
              <h4>创建支付订单</h4>
              <p>订单号：{{ paymentData.orderNo }}</p>
              <p>金额：¥{{ paymentData.formattedAmount }}</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="paymentData.paymentTime"
            :timestamp="formatDateTime(paymentData.paymentTime)"
            placement="top"
            type="success"
          >
            <el-card>
              <h4>支付成功</h4>
              <p>支付方式：{{ paymentData.paymentMethodName }}</p>
              <p v-if="paymentData.thirdPartyOrderNo">第三方订单号：{{ paymentData.thirdPartyOrderNo }}</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="paymentData.refundTime"
            :timestamp="formatDateTime(paymentData.refundTime)"
            placement="top"
            type="warning"
          >
            <el-card>
              <h4>申请退款</h4>
              <p>退款金额：¥{{ paymentData.formattedRefundAmount }}</p>
              <p>退款原因：{{ paymentData.refundReason }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          v-if="paymentData?.canRefund && !paymentData?.isRefunded"
          type="success"
          @click="handleRefund"
        >
          申请退款
        </el-button>
        <el-button
          v-if="paymentData?.paymentStatus === 1"
          type="warning"
          @click="handleCancel"
        >
          取消支付
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { PaymentVO } from '../types/payment'

// 作者: Wu.Liang

// Props
interface Props {
  modelValue: boolean
  paymentData: PaymentVO | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'refund': [payment: PaymentVO]
  'cancel': [payment: PaymentVO]
}>()

// 计算属性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 方法
const handleClose = () => {
  dialogVisible.value = false
}

const handleRefund = () => {
  if (props.paymentData) {
    emit('refund', props.paymentData)
  }
}

const handleCancel = () => {
  if (props.paymentData) {
    emit('cancel', props.paymentData)
  }
}

// 工具方法
const getPaymentMethodTagType = (paymentMethod: number) => {
  const typeMap = {
    1: 'success',
    2: 'primary',
    3: 'warning',
    4: 'info'
  }
  return typeMap[paymentMethod as keyof typeof typeMap] || 'info'
}

const getStatusTagType = (status: number) => {
  const typeMap = {
    1: 'warning',
    2: 'primary',
    3: 'success',
    4: 'danger',
    5: 'info'
  }
  return typeMap[status as keyof typeof typeMap] || 'info'
}

const getStatusEffect = (status: number) => {
  return status === 4 ? 'dark' : 'light'
}

const getBusinessTypeTagType = (businessType: number) => {
  const typeMap = {
    1: 'primary',
    2: 'success',
    3: 'warning',
    4: 'info'
  }
  return typeMap[businessType as keyof typeof typeMap] || 'info'
}

const formatDateTime = (dateTime: string | undefined) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString()
}
</script>

<style scoped>
.payment-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.amount {
  font-weight: 600;
  color: #67c23a;
}

.refund-amount {
  font-weight: 600;
  color: #f56c6c;
}

.text-muted {
  color: #909399;
  font-size: 12px;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-timeline-item__content) {
  margin-bottom: 10px;
}

:deep(.el-timeline-item__content h4) {
  margin: 0 0 8px 0;
  color: #303133;
}

:deep(.el-timeline-item__content p) {
  margin: 4px 0;
  color: #606266;
  font-size: 14px;
}
</style> 